<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="名称" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="childMethod">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { Script } from 'vm'
import { useradd } from '@/api/category'
import Pagination from '@/components/Pagination'
Vue.use(VXETable)
export default {
  data() {
    return {
      form: {
        input: '',
        name: ''
      }
    }
  },
  created() {},
  methods: {
    childMethod() {
      useradd(this.form).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.$emit('cancel')
      })
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-top: 50px;
}
</style>
